<template>
  <!-- key:当值发生改变时，更新整个组件 -->
  <div :style="newStyle">
    <span v-if="$attrs.onlyShow">{{value}}</span>
    <el-color-picker
      v-else
      :key="$attrs.colorFormat"
      v-model="formValue"
      v-bind="$attrs"
      @change="onChange"
    />
  </div>
</template>

<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-color-picker",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: ["value"],
  computed: {
    formValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>